<template>
	<scroll-view class="conference-ruler" scroll-x>
		<view class="ruler">
			<view class="hour" v-for="item in hour" :key="item">
				<view class="hour-half" v-for="item1 in 2" :key="item1">
					<!-- #ifdef APP-PLUS || H5 -->
					<view class="fifteen"
						v-for="item2 in 2"
						:key="item2"
						:style="draw[item][String(item1 - 1) + String(item2 - 1)] ? 'background: #E8E8E8;' : ''"
					>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS || H5 -->
					<view class="fifteen"
						v-for="item2 in 2"
						:key="item2"
						:style="draw[item][String(item1) + String(item2)] ? 'background: #E8E8E8;' : ''"
					>
					<!-- #endif -->
					</view>
				</view>
				<view class="hour-num" v-if="item % 2 === 1">
					{{ item }}
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	var dayjs = require('dayjs');
	var isBetween = require('dayjs/plugin/isBetween');
	dayjs.extend(isBetween);
	export default {
		name: 'ConferenceRuler',
		props: {
			time: Array
		},
		data() {
			return {
				hour: ['06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
				section: []
			}
		},
		watch: {
			time: {
				handler(val) {
					this.init();
				},
				deep: true,
			}
		},
		computed: {
			draw() {
				let obj = {};
				this.hour.forEach(item => {
					obj[item] = {
						"00": false, // 代表 15
						"01": false, // 代表 30
						"10": false, // 代表 45
						"11": false  // 代表 60
					}
					this.section.forEach(i => {
						const nowDate = dayjs().format('YYYY-MM-DD');
						if (dayjs(nowDate + ' ' + item + ':15').isBetween(nowDate + ' ' + i[0], nowDate + ' ' + i[1], 'minute', '(]')) {
							obj[item]['00'] = true;
						}
						if (dayjs(nowDate + ' ' + item + ':30').isBetween(nowDate + ' ' + i[0], nowDate + ' ' + i[1], 'minute', '(]')) {
							obj[item]['01'] = true;
						}
						if (dayjs(nowDate + ' ' + item + ':45').isBetween(nowDate + ' ' + i[0], nowDate + ' ' + i[1], 'minute', '(]')) {
							obj[item]['10'] = true;
						}
						if (dayjs(nowDate + ' ' + item + ':59').isBetween(nowDate + ' ' + i[0], nowDate + ' ' + i[1], 'minute', '(]')) {
							obj[item]['11'] = true;
						}
					})
				})
				return obj;
			}
		},
		methods: {
			init() {
				const nowHour = dayjs().hour();
				const nowMinute = dayjs().minute();
				if (nowHour < 6) {
					// 什么都不用做
				} else {
					let arr = [];
					arr.push('06:00');
					if (nowMinute === 0) {
						arr.push(`${nowHour}:00`);
					} else if (nowMinute < 15 && nowMinute > 0) {
						arr.push(`${nowHour}:00`);
					} else if (nowMinute >= 15 && nowMinute < 30) {
						arr.push(`${nowHour}:15`);
					} else if (nowMinute >= 30 && nowMinute < 45) {
						arr.push(`${nowHour}:30`);
					} else if (nowMinute >= 45 && nowMinute < 60) {
						arr.push(`${nowHour}:45`);
					}
					this.section.push(arr);
					this.time.forEach(item => {
						this.section.push(item);
					})
				}
			}
		},
		created() {
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	::-webkit-scrollbar {
		display:none;
		width:0;
		height:0;
		color:transparent;
	}
	.conference-ruler {
		height: 50px;
		
		white-space: nowrap;
		
		border-top: 1px solid #E8E8E8;
		&::-webkit-scrollbar {
			display:none !important;
			width:0 !important;
			height:0 !important;
			color:transparent !important;
		}
		.ruler {
			display: flex;
			align-items: flex-end;
			min-width: 750rpx;
			height: 30px;
			&::-webkit-scrollbar {
				display:none !important;
				width:0 !important;
				height:0 !important;
				color:transparent !important;
			}
		}
		.hour {
			display: flex;
			align-items: flex-end;
			flex-shrink: 0;
			
			position: relative;
			width: 54rpx;
			height: 20px;
			border-right: 2rpx solid #E8E8E8;
			border-bottom: 1px solid #E8E8E8;
			&-num {
				position: absolute;
				bottom: -20px;
				left: -12rpx;
				
				font-size: 24rpx;
				
				color: #8E8E8E;
			}
			&-half {
				display: flex;
				align-items: flex-end;
				flex: 1;
				height: 12px;
				&:nth-child(1) {
					border-right: 2rpx solid #E8E8E8;
				}
				.fifteen {
					flex: 1;
					height: 12px;
				}
			}
		}
	}
</style>
